<template>
	<view class="burstpoint-box">
		<u-navbar title="爆点" bgColor="rgba(254, 126, 41, 0.00)" titleStyle="color: #000;font-size: 32rpx;"
			leftIconSize="36rpx" leftIconColor="#000" @leftClick="goBack">

		</u-navbar>

		<view :style="'margin-top: ' + mgTop + 'px;padding-top:20rpx;'">
			<!-- 卡片组件 -->
			<MoneyCard :name="'爆点'" :number="96.66">
				<view class="point-notes" @click="goPointNotes">
					<view class="point-notes-icon">
						<view class="line"></view>
						<view class="line"></view>
					</view>
					<view style="margin-top: 12rpx;">爆点明细</view>
				</view>
			</MoneyCard>
		</view>

		<!-- 爆点充值 -->
		<view class="burstpoint-title public345">
			爆点充值
		</view>
		<view class="burstpoint-add public345">

			<view class="burstpoint-add-item" :class="{'active':index === checkedPointsIndex}" v-for="(it,index) in 6"
				:key="index" @click="checkedPointsIndex = index">
				<image :src="imageUrl('add-boom.png')" mode="" class="img" />
				<view class="points">
					500爆点
					<view class="moneys">
						¥500
					</view>
				</view>
			</view>
		</view>

		<!-- 支付方式 -->
		<view class="burstpoint-title public345">
			支付方式
		</view>
		<view class="burstpoint-pay public345">
			<!-- 余额不足时 样式类名 cannot -->
			<view class="way" :class="{'choose':index===checkedPayIndex}" v-for="(one,index) in twoPayWay" :key="index"
				@click="changeCheckedPayIndex(index)">
				<!-- 左侧盒子 -->
				<view class="way-left">
					<!-- 支付方式logo -->
					<image class="image" :src="one.iconPath" mode="" />
					<view class="way-main">
						<!-- 名称 -->
						<view class="way-name">
							{{one.name}}
						</view>
						<!-- 余额 -->
						<view>
							{{one.rest}}
						</view>
					</view>
				</view>
				<!-- 右侧单选框 -->
				<uni-icons type="checkbox-filled" size="26" color="#FF7803" class="way-right"
					v-show="index===checkedPayIndex">
				</uni-icons>
			</view>
		</view>

		<view style="height: 250rpx;"></view>

		<!-- 底部盒子 -->
		<view class="burstpoint-bottom public345">
			<view class="agree">
				<uni-icons type="circle" color="#D0D0D0" size="30rpx" class="icon"></uni-icons>
				<text>我已阅读并同意</text>
				<text style="color: #FF7803;">《用户购买协议》</text>
			</view>
			<view class="to-pay">
				<view class="to-pay-money">¥ 500</view>
				<view class="to-pay-submit">确认支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MoneyCard from '../../components/common/MoneyCard.vue'
	const app = getApp()
	const imagesUrl = app.imagesUrl
	export default {
		data() {
			return {
				imagesUrl,
				mgTop: 0,
				// 爆点充值
				checkedPointsIndex: 0,
				// 两种支付方式
				twoPayWay: [{
					iconPath: this.imageUrl('rest-pay.png'),
					name: '余额支付',
					rest: '余额：99.62'
				}, {
					iconPath: this.imageUrl('wx-pay.png'),
					name: '微信支付',
					rest: '微信支付订单'
				}],
				checkedPayIndex: 0,
			}
		},
		methods: {
			goPointNotes() {
				uni.navigateTo({
					url: '/pages/burstpoint/PointNotes'
				})
			},
			// 改变选中的支付方式
			changeCheckedPayIndex(v) {
				// 需要判断余额是否足够支付
				this.checkedPayIndex = v
			},
			goBack() {
				uni.navigateBack()
			}
		},
		components: {
			MoneyCard
		},
		mounted() {
			// #ifdef MP-WEIXIN
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.mgTop = menuButtonInfo.bottom
			// #endif

			// #ifdef APP-PLUS
			this.mgTop = uni.getSystemInfoSync().statusBarHeight + 44
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	.burstpoint-box {
		font-size: 24rpx;
		position: relative;
		width: 100vw;

		&::before {
			position: absolute;
			top: -212rpx;
			left: -212rpx;
			content: '';
			display: block;
			width: 424rpx;
			height: 424rpx;
			border-radius: 50%;
			opacity: 1;
			background: #FF9C47;
			filter: blur(300rpx);
			z-index: -99;
		}

		&::after {
			position: absolute;
			top: -117rpx;
			right: -117rpx;
			content: '';
			display: block;
			width: 234rpx;
			height: 234rpx;
			border-radius: 50%;
			opacity: 1;
			background: #FFF200;
			filter: blur(300rpx);
			z-index: -99;
		}

		.point-notes {
			margin-top: 20rpx;
			text-align: center;

			.point-notes-icon {
				width: 36rpx;
				height: 40rpx;
				border: 6rpx solid #333;
				margin: 0 auto;

				.line {
					width: 14rpx;
					height: 6rpx;
					background: #333;

					margin: 6rpx auto 0;

					&:nth-child(2) {
						margin-top: 4rpx;
					}
				}
			}
		}

		.burstpoint-title {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 70rpx;
			color: #333;
		}

		// 爆点充值
		.burstpoint-add {
			display: flex;
			flex-wrap: wrap;

			.burstpoint-add-item {
				display: flex;
				width: 336rpx;
				height: 132rpx;
				padding: 24rpx 0 0 20rpx;
				border-radius: 16rpx;
				background: #fff;
				border: 2rpx solid #fff;
				box-sizing: border-box;

				.img {
					width: 48rpx;
					height: 48rpx;
					margin-right: 14rpx;
				}

				.points {
					display: inline-block;
					font-size: 36rpx;
					font-weight: 500;

					.moneys {
						font-size: 24rpx;
						font-weight: normal;
						color: #999;
					}
				}

				&:nth-child(2n-1) {
					margin: 0 18rpx 18rpx 0;
				}

				// 最后一个爆点充值 去除外边距
				&:nth-last-child(1) {
					margin: 0;
				}

				// 倒数第2个爆点充值 去除下边距
				&:nth-last-child(2) {
					margin: 0 18rpx 0 0;
				}

				&.active {
					border: 2rpx solid #FF7803;
					box-sizing: border-box;
					color: #fff;
					color: #FF7803;

					.moneys {
						color: #FF7803;
					}
				}
			}
		}

		// 支付方式
		.burstpoint-pay {
			display: flex;
			flex-wrap: wrap;

			.way {
				display: flex;
				justify-content: space-between;
				width: 336rpx;
				padding: 32rpx 20rpx;
				border-radius: 16rpx;
				border: 1rpx solid #fff;
				background: #fff;
				box-sizing: border-box;

				&:nth-child(2n+1) {
					margin-right: 18rpx;
				}

				.way-left {
					display: flex;

					.image {
						width: 40rpx;
						height: 40rpx;
						margin: 14rpx 20rpx 0 0;
					}

					.way-main {
						font-size: 24rpx;
						color: #999;

						.way-name {
							font-size: 26rpx;
							font-weight: 500;
							color: #333;
						}
					}
				}

				// 选中 加边框
				&.choose {
					border: 1rpx solid #FF7803;
				}

				// 余额不足时的样式
				&.cannot {
					opacity: .5;
				}
			}
		}


		// 底部盒子
		.burstpoint-bottom {
			position: fixed;
			bottom: 0;
			background: #fff;

			// 小程序 底部
			// 兼容 IOS 11.2 以下
			// padding-bottom: constant(safe-area-inset-bottom);
			// 兼容 IOS 11.2 以上
			// padding-bottom: env(safe-area-inset-bottom);

			// 预设一个高度
			padding-bottom: calc(18rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(18rpx + env(safe-area-inset-bottom));

			.agree {
				padding: 18rpx 0;
				font-size: 24rpx;
				color: #999;

				.icon {
					margin-right: 18rpx;
					vertical-align: bottom;
				}
			}

			.to-pay {
				display: flex;
				justify-content: space-between;

				.to-pay-money {
					font-size: 48rpx;
					font-weight: bold;
					line-height: 72rpx;
					color: #FF7803;
				}

				.to-pay-submit {
					width: 240rpx;
					text-align: center;
					line-height: 88rpx;
					border-radius: 44rpx;
					background: #FF7803;
					font-size: 32rpx;
					font-weight: 600;
					color: #fff;
				}
			}
		}
	}
</style>